<template>
    <el-container>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>农产品全称配置管理</el-breadcrumb-item>
        <el-breadcrumb-item>产地信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-header>
        <el-form  :inline="true" label-width="100px">
          <el-form-item label="生产基地" size="mini">
            <el-input placeholder="生产基地"></el-input>
          </el-form-item>
          <el-form-item label="企业名称" size="mini">
            <el-input placeholder="企业名称"></el-input>
          </el-form-item>
          <el-form-item label="负责人" size="mini">
            <el-input placeholder="负责人"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" size="mini">
            <el-input placeholder="联系电话"></el-input>
          </el-form-item>
          <el-form-item size="mini">
            <el-button icon="el-icon-search" type="primary">查询</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-row style="float: left; margin-bottom: 10px;">
          <el-button icon="el-icon-plus" size="mini" type="primary">新增</el-button>
          <el-button icon="el-icon-edit" size="mini" type="primary">修改</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
          <el-button icon="el-icon-download" size="mini" type="warning">导出</el-button>
        </el-row>
        <el-table :cell-style="{ textAlign: 'center' }"
                  :data="tableData" :header-cell-style="{ backgroundColor: '#f7f8fa', textAlign: 'center' }"
                  size="mini">
          <el-table-column type="selection" />
          <el-table-column label="基地名称" prop="name"/>
          <el-table-column label="所属企业" prop="jj"/>
          <el-table-column label="地址" prop="address"/>
          <el-table-column label="负责人" prop="fuzeren"/>
          <el-table-column label="联系电话" prop="phone"/>
          <el-table-column label="简介" prop="jj"/>
          <el-table-column label="网址" prop="wz"/>
          <el-table-column label="经纬度" prop="jwd">
            <template slot-scope="scope">
                <el-button type="text">定位</el-button>
            </template>
          </el-table-column>
          <el-table-column label="产地图片" prop="image">
            <template slot-scope="scope">
                <el-button type="text">上传图片</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" title="编辑" type="text"></el-button>
              <el-button icon="el-icon-delete" style="color: red" title="删除" type="text"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" />
      </el-main>
    </el-container>
  </template>
  
  <script>
  import Pagination from '../../components/Pagination'
  export default {
    components:{
    },
    data() {
      return {
        tableData: [
          { address: 'xx路xx号',image: '',fuzeren: '王某',phone: '19876354635',wz: 'www.xinnong.com', jj: '新农公司',name: '新农基地',jwd: '',rzsj: '2023/6/11',youxiaoqi: '2023/9/11',video: ''},
          { address: 'xx路xx号',image: '',fuzeren: '赵某',phone: '19876354435',wz: 'www.xnkj.com',jj: '新农科技公司',name: '新农科技基地',jwd: '',rzsj: '2023/9/11',youxiaoqi: '2023/8/11',video: '', createDate: '2022-09-03', name: '猪肉', pname: '肉类', pinfo: '猪肉', caishou: '2023/9/11', num: 'rou_001', order: 2, status: true },
          { address: 'xx路xx号',image: '',fuzeren: '朱某',phone: '19876354643',wz: 'www.huinong.com',jj: '惠农公司',name: '惠农基地',jwd: '',rzsj: '2023/9/11',youxiaoqi: '2023/7/11',video: '', createDate: '2022-12-10', name: '鸡蛋', pname: '蛋类', pinfo: '鸡蛋', caishou: '2023/9/11', num: 'dan_001', order: 3, status: true }
        ]
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    created() {
    },
    methods: {
      
    }
  }
  </script>
  
  <style lang="scss" scoped>
  /deep/ .el-form-item{
    margin-bottom:0;
  }
  .el-breadcrumb {
    margin: 5px;
  }
  .el-container {
    background-color: #eef3fa;
    height: 100%;
    padding: 10px;
  }
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
  .el-header {
    background-color: white;
    margin: 10px 0;
    padding: 15px 30px;
    min-height: 60px !important;
    height: auto !important;
}
  .el-main {
    background-color: white;
  }
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
  /deep/ .el-main .el-row{
     button:nth-child(2) {
        background-color: rgb(103, 219, 220) !important;
        border: 1px solid rgb(103, 219, 220);
     }
  }
/deep/ .el-form--inline {
  display: flex;
  flex-wrap: wrap;
  .el-form-item{
    display: flex;
    width: 20%;
  }
}
.el-form-item--mini.el-form-item {
  margin: 10px;
}
  </style>
  
   
   